<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/upload/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/upload/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/upload/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/upload/lib/base64.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/upload/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
</head>
<style type="text/css">
.progress {
	width: 100%;
	position: fixed;
	top: -6px;
	left: 0px;
	height: 2px;
	background-color: #c7c7c7;
}

#selectfiles {
	color: white;
	background-color: #007aff;
	border-radius: 3px;
	width: 95px;
	height: 35px;
	text-align: center;
	display: block;
	margin: auto;
	margin-top: 2px;
	position: relative;
}

.screenshot_input {
	position: absolute;
	left: 0;
	width: 100%;
}

.mui-input-row label {
	width: 38%;
}

.mui-checkbox, .mui-radio {
	display: inline-block;
}

.mui-radio, .mui-left label {
	width: unset;
}
</style>
<form class="mui-input-group">
	<div class="mui-input-row" style="height: 100px;">
		<label>编辑消息:</label>
		<textarea placeholder="请输入消息内容" style="width: 96%;" name="content"></textarea>
	</div>

	<div id="ossfile"></div>
	<div class="mui-input-row">
		<label>添加图片:</label> <a id="selectfiles" style="line-height: 40px;"
			href="javascript:void(0);"> 上传文件 <input type="file"
			class="screenshot_input" style="opacity: 0;"></a>
	</div>
	<div class="mui-input-row" style="height: 100%;">
		<label>消息接收人:</label>
		<div class="mui-radio mui-left">
			<label>今天的用户</label> <input name="users" type="radio" value="1">
		</div>
		<div class="mui-radio mui-left">
			<label>一周内的用户</label> <input name="users" type="radio" value="2">
		</div>
		<div class="mui-radio mui-left">
			<label>一个月内的用户</label> <input name="users" type="radio" value="3">
		</div>
		<div class="mui-radio mui-left">
			<label>全部</label> <input name="users" type="radio" value="4">
		</div>
	</div>
	<div class="mui-button-row">
		<a type="button" class="mui-btn mui-btn-primary submit">发送</a>
	</div>
</form>
<script type="text/javascript">
    mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
    
    $(".mui-title").html("图文消息");
    
	$('.screenshot_input').change(function() {
		//获取file对象 即相当于可以直接post的$_FILES数据 
		var domFile = $(this)[0].files[0];
		$(".file_name").text(domFile.name);
		//console.log(domFile.name);

		var domForm = $('#testForm')[0];
		//将form对象直接作为参数 new FormData对象 
		var formData = new FormData(domForm);
		//追加file 对象 
		formData.append('file', domFile);
		//url: 'upload_file.action',
		$.ajax({
			url : '/message/uploadImage',
			type : "POST",
			data : formData,
			processData : false, // tell jQuery not to process the data 
			contentType : false, // tell jQuery not to set contentType 
			xhr : function() { //这是关键 获取原生的xhr对象 做以前做的所有事情 
				var xhr = jQuery.ajaxSettings.xhr();
				xhr.upload.onload = function() {
					//alert('上传完成')
				}
				xhr.upload.onprogress = function(ev) {
					if (ev.lengthComputable) {
						var percent = parseInt(100 * ev.loaded / ev.total);
						//console.log(percent, ev);
						$("#aa_bar").attr("lay-percent", percent + "%");
						/* if(percent === 100 ){
							console.log("上传完成");
						} */
					}
				}
				return xhr;
			},
			success : function(data) {
				// console.log(data);
			},
			error : function() {
				// console.log("上传失败");
			}
		})
	})
	
	/* ---------------------------广告 ---------------------------- */
	   
	$(".submit").on("touchstart",function(){
		   var param = $("form").serialize();
	    	let name = $(".name").val();
	    	let url = $("#url").val();

	    	if(name == ""){
	    		mui.toast("带 "+'<span style="color:red;">*</span> 为必填项');
	    	}else if(url == ""){
	    		mui.toast("未完成上传");
	    	}else if(flag == 3){
	    		mui.toast("上传失败");
	    	}else{
				$.post("/publishFile/addFile",param,function(res){
					if(res.success){
						mui.toast("添加成功");
			    	}else{
			    		mui.toast(res.message);
			    	}
					
				})
	    	}
	   })
	   
	</script>
</html>